<template>
  <div class="dd">
    <div class="d1">
      <span class="s1"></span>
      <div class="d1a">
        <p class="p1">恭喜 , 您已成功注册 !</p>
        <p class="p2">新人专享<span class="s2">188</span>元礼包等你来领，扫码<span class="s3">立即领取>></span></p>
        <p class="p3">登录名为：{{phone}}</p>
        <p class="p4"><a href="javascript:void(0)" class="a1" @click="dl()">登录</a></p>
      </div>
    </div>
    <div class="d2">
      <dl>
        <dt>想预订，马上点击</dt>
        <dd>
          <a href=""><span class="iconfont icon-jingdian"></span><p class="pp">景点</p></a>
          <a href=""><span class="iconfont icon-feiji"></span><p class="pp">机票</p></a>
          <a href=""><span class="iconfont icon-huochepiao"></span><p class="pp">火车票</p></a>
          <a href=""><span class="iconfont icon-jiudian"></span><p class="pp">酒店</p></a>
          <a href=""><span class="iconfont icon-gonglve"></span><p class="pp">攻略</p></a>
          <a href=""><span class="iconfont icon-lvyouchanpin"></span><p class="pp">国内游</p></a>
          <a href=""><span class="iconfont icon-qichepiao"></span><p class="pp">汽车</p></a>
          <a href=""><span class="iconfont icon-lunchuan"></span><p class="pp">船票</p></a>
        </dd>
      </dl>
      <div class="d3">
        <p>温馨提示:</p>
        <p>完善个人资料，获得生日礼包<span class="iconfont icon-liwu" id="ii"></span><span class="sa" @click="dj">立即填写</span></p>
        <el-form style="padding-top: 10px" :model="userForm" id="form" v-if="pd">
          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="userForm.sex">
              <el-radio value="1">男</el-radio>
              <el-radio value="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="birthday" label="生日">
            <el-date-picker v-model="userForm.birthday" type="date" style="width: 100%"/>
            <p class="ptj" @click="up()">提交</p>
          </el-form-item>
        </el-form>
        <p><span class="sc">每日签到</span>，提高会员等级，享受更多优惠 <span class="sb">立即签到>></span></p>
      </div>
    </div>
    <div class="d4">
      <p class="ppa">Copyright&nbsp;&copy;&nbsp;2002-2025 版权所有 同程网络科技股份有限公司</p>
      <p class="ppa1">苏ICP证B2-20100204</p>
    </div>
  </div>
</template>


<script setup>
import {ref} from "vue";
import {useCounterStore} from "@/stores/counter.js";//引入pinia
import {tx} from "@/api/wzz/vue3.js";
import router from "@/router/index.js";
const store = useCounterStore();//实例化pinia
const pd = ref(false)
const dj = () => {
pd.value = !pd.value
}
const userForm = ref({
  sex:0,
  birthday:'',
  phone:store.userForm.phone
})
const phone= ref('')//定义一个变量
phone.value =store.userForm.phone//将pinia中的phone赋值给phone
const up=async() => {
  const res = await tx(userForm.value)
  console.log(res)
  if (res.data.code == 200) {
    alert("提交成功")
  }
}
const dl=()=>{
  router.push("/")
}
</script>



<style scoped>
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css');
.dd{
  width:100%;
  height: 400px;
  margin: 0 auto;
}
.s1{
  display: inline-block;
  width: 80px;
  height: 80px;
  background: url("@/views/wzz/register/img/success.png") no-repeat;
  margin-left: 250px;
}
.d1{
  display: flex;
  width: 800px;
  height: 200px;
  margin: 0 auto;
  padding-top: 10px;
}
.d1a{
  width: 400px;
  height: 80px;
  border-bottom: 1px dashed #E6E6E6;
}
.d2{
  width: 80%;
  height: 250px;
  margin: 0 auto;
  border-top:1px dashed #E6E6E6;
}
.a1{
  text-decoration: none;
  display: inline-block;
  width: 72px;
  height: 28px;
  background: #ff6257;
  color: white;
  text-align: center;
  line-height: 28px;
  border-radius: 3px;
}
.p1{
  font-weight: 700;
  color: #333;
  font-size: 20px;
  margin-bottom: 7px;
}
.p2{
  color: #666;
  font-size: 14px;
}
.s2{
  color: #f63;
  font-weight: Bold;
}
.s3{
  cursor: pointer;
  color: #ff7800;
}
.p3{
  margin-top:45px ;
  color: #333;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 10px;
}
dd>a>span{
  display: inline-block;
  width: 35px;
  height: 35px;
  font-size: 23px;
  text-align: center;
  line-height: 35px;
  color: #00C777;
  border-radius: 50%;
  border: 3px solid #C4F2DF;
}
dd{
  display: flex;
  justify-content: center;
}
dd>a{
  display: inline-block;
  width: 100px;
  height: 40px;
  text-decoration: none;
  text-align: center;
}
dt{
  margin-left: 220px;
  margin-bottom: 15px;
  margin-top: 40px;
  font-size: 14px;
  color: #333;
}
.pp{
  font-size: 14px;
  color: #333;
}
.d3{
  width: 400px;
  height: 100px;
  margin-left: 220px;
  margin-top: 40px;
  color: #666;
  font-weight: 400;
  font-size: 15px;
  line-height: 26px;
}
.sa{
  color:#0888C7;
  margin-left: 70px;
  cursor: pointer
}
.sb{
  margin-left: 10px;
  color:#0888C7;
}
.sc{
  color: #FF6257;
}
#ii{
  color: #FF6257;
}
.d4{
  width: 80%;
  height: 70px;
  border-top: 1px solid #E2E2E2;
  margin: 0 auto;
  margin-top: 200px;
}
.ppa{
  width: 360px;
  line-height: 40px;
  color: #999999;
  font-size: 12px;
  margin:0 auto;
}
.ppa1{
  width: 150px;
  line-height: 1px;
  color: #999999;
  font-size: 12px;
  margin:0 auto;
}
.ptj{
  width: 70px;
  height: 30px;
  border: 1px solid #DDDDDD;
  line-height: 30px;
  text-align: center;
  margin-top: 15px;
}
#form{
  cursor: pointer;
}
</style>